<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TweenMax</title>
<style type="text/css">
body{ margin: 0; }
.ef-scroll-ani-total-box{
    position: sticky;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}
.ef-scroll-ani{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    will-change: opacity;
}
.ef-scroll-ani .ef-scroll-ani-trigger{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ef-scroll-ani .ef-scroll-ani-inter{
    position: relative;
}
</style>
<style type="text/css">
.grey{ width: 200px; height: 100px; border: 1px solid #DDD; text-align: center; transition: all 0.5s;}
.grey.active{ width: 500px; }
</style>
<style type="text/css">
.full-box-a{ width: 100%; height: 500vh; }
.full-box-b{ width: 100%; height: 300vh; }
</style>
<style type="text/css">
.greyA2, .greyA3, .greyA4{  opacity: 0;}
</style>
</head>
<body>
    <div id='trigger-1'></div>
    <div class="full-box-a">
        <div class='ef-scroll-ani-total-box'>
            <div class="ef-scroll-ani">
                <div class="ef-scroll-ani-trigger">
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyA1">a1</div>
                    </div>
                </div>
            </div>
            
            <div class="ef-scroll-ani">
                <div class='ef-scroll-ani-trigger'>
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyA2">a22</div>
                    </div>
                </div>
            </div>

            <div class="ef-scroll-ani">
                <div class='ef-scroll-ani-trigger'>
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyA3">a333</div>
                    </div>
                </div>
            </div>

            <div class="ef-scroll-ani">
                <div class='ef-scroll-ani-trigger'>
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyA4">a444</div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div id='trigger-2'></div>
    <div class="full-box-b">
        <div class='ef-scroll-ani-total-box'>
            <div class="ef-scroll-ani">
                <div class="ef-scroll-ani-trigger">
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyB1">b1</div>
                    </div>
                </div>
            </div>
            
            <div class="ef-scroll-ani">
                <div class='ef-scroll-ani-trigger'>
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyB2">b22</div>
                    </div>
                </div>
            </div>

            <div class="ef-scroll-ani">
                <div class='ef-scroll-ani-trigger'>
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyB3">b333</div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/ScrollTrigger.min.js"></script>
<script>
const layoutH = window.innerHeight;
gsap.registerPlugin(ScrollTrigger);
let currentNum = 0;
</script>
<script>
++currentNum;
const tl1 = gsap.timeline({
    scrollTrigger: {
        trigger: '#trigger-1',
        scrub: true,//和滚动绑定
        start: `${layoutH * currentNum} bottom`,
        end: `+=${layoutH}`,
    }
});
tl1.to('.greyA1', {
    opacity: 0,
    duration: 0.5,
}).fromTo('.greyA2', {
    opacity: 0,
    scale: 4,
}, {
    opacity: 1,
    scale: 1,
}, 0.3)
</script>
<script>
++currentNum;
const tl2 = gsap.timeline({
    scrollTrigger: {
        trigger: '#trigger-1',
        scrub: true,//和滚动绑定
        start: `${layoutH * currentNum} bottom`,
        end: `+=${layoutH}`,
    }
});
tl2.to('.greyA2', {
    opacity: 0,
    duration: 0.5,
}).fromTo('.greyA3', {
    opacity: 0,
    scale: 0.5,
}, {
    opacity: 1,
    scale: 1,
}, 0.3)
</script>
<script>
++currentNum;
const tl3 = gsap.timeline({
    scrollTrigger: {
        trigger: '#trigger-1',
        scrub: true,//和滚动绑定
        start: `${layoutH * currentNum} bottom`,
        end: `+=${layoutH}`,
    }
});
tl3.to('.greyA3', {
    opacity: 0,
    duration: 0.5,
}).fromTo('.greyA4', {
    opacity: 0,
    scale: 0.5,
}, {
    opacity: 1,
    scale: 1,
}, 0.3)
</script>

</html>
